<extend name="Public/base"/>

<block name="body">
  <div class="main-title">
    <h2>分类管理</h2>
  </div>

  <!-- 表格列表 -->
  <div class="tb-unit posr">
    <div class="tb-unit-bar">
      <a class="btn" href="{:U('add')}">新 增</a>
    </div>
    <div class="category">
      <div class="hd cf">
        <div class="fold">折叠</div>
        <div class="order">排序</div>
        <div class="order">显示</div>
        <div class="order">ID</div>
        <div class="name">名称</div>
      </div>
      <volist name="tree" id="list">
        <dl class="cate-item tree_{$list.id}">
          <dt class="cf status_dtclass_{$list.status}">
          <form action="{:U('edit')}" method="post">
            <div class="btn-toolbar opt-btn cf">
              <a title="编辑" href="{:U('edit?id='.$list['id'].'&pid='.$list['pid'])}">[编辑]</a>
              <a title="{$list.status|show_status_op}" href="{:U('setStatus?ids='.$list['id'].'&status='.abs(1-$list['status']))}" class="ajax-get">[{$list.status|show_status_op}]</a>
              <a title="删除" href="{:U('remove?id='.$list['id'])}" class="confirm ajax-get">[删除]</a>
            </div>
            <div class="fold"><eq name="list.is_fold" value="1"><i class="icon-fold is_fold" data-pid="{$list['id']}"></i><else/><i class="is_fold" data-pid="{$list['id']}"></i></eq></div>
            <div class="order"><input type="text" name="sort" class="text input-mini" value="{$list.sort}"></div>
            <div class="order">{$list['is_display']?'是':'否'}</div>
            <div class="order">{$list.id}</div>
            <div class="name">
              <span class="tab-sign"></span>
              <input type="hidden" name="id" value="{$list.id}">
              <input type="text" name="name" class="text" value="{$list.name}">
              <a class="add-sub-cate" title="添加子分类" href="{:U('add?pid='.$list['id'])}">
                <i class="icon-add"></i>
              </a>
              <span class="help-inline msg"></span>
            </div>

            <div class="order" style="width:150px;">
              <if condition='$list.is_topshow eq 0'>
                <a style="color:red" href="{:U('setfield' ,array('id'=> $list['id'] , 'field' => 'is_topshow' , 'value' => '1'))}" class="ajax-get">[置顶]</a>
                <else />
                <a style="color:blue" href="{:U('setfield' ,array('id'=> $list['id'] , 'field' => 'is_topshow' , 'value' => '0'))}" class="ajax-get">[取消置顶]</a>
              </if>
            </div>
          </form>
          </dt>
        </dl>
      </volist>
    </div>
  </div>
  <!-- /表格列表 -->
</block>

<block name="script">
  <script type="text/javascript">
    (function($){
      /* 分类展开收起 */
        /*$(".category dd").prev().find(".fold i").addClass("icon-fold").click(function(){
            var self = $(this);
            if(self.hasClass("icon-unfold")){
                self.closest("dt").next().slideUp("fast", function(){
                    self.removeClass("icon-unfold").addClass("icon-fold");
                });
            }else{
                self.closest("dt").next().slideDown("fast", function(){
                    self.removeClass("icon-fold").addClass("icon-unfold");
                });
            }
        });*/
        $('.category').on('click','.is_fold',function () {
            var pid = $(this).data('pid');
            if($('.tree_'+pid).children('dd').length == 0){
                $.post("{:U('index')}", {'pid':pid}, function(data){
                    $('.tree_'+pid).append(data.data);
                    $('.tree_'+pid).find("dd").slideDown("fast", function(){
                        $(".category dd").prev().find(".fold i").removeClass("icon-fold").addClass("icon-unfold");
                    });
                }, 'json');
            }else{
                if($(this).hasClass("icon-unfold")){
                    $('.tree_'+pid).find("dd").slideUp("fast", function(){
                        $('.tree_'+pid).find(".fold i").first().removeClass("icon-unfold").addClass("icon-fold");
                    });
                }else{
                    $('.tree_'+pid).find("dd").slideDown("fast", function(){
                        $(".category dd").prev().find(".fold i").removeClass("icon-fold").addClass("icon-unfold");
                    });
                }
            }
        });

      /* 三级分类删除新增按钮 */
      $(".category dd dd .add-sub-cate").remove();

      /* 实时更新分类信息 */
      $(".category")
        .on("submit", "form", function(){
          var self = $(this);
          $.post(
            self.attr("action"),
            self.serialize(),
            function(data){
              /* 提示信息 */
              var name = data.status ? "success" : "error", msg;
              msg = self.find(".msg").addClass(name).text(data.info)
                    .css("display", "inline-block");
              setTimeout(function(){
                msg.fadeOut(function(){
                  msg.text("").removeClass(name);
                });
              }, 1000);
            },
            "json"
          );
          return false;
        })

        .on("focus","input",function(){
          $(this).data('param',$(this).closest("form").serialize());
        })

        .on("blur", "input", function(){
          if($(this).data('param')!=$(this).closest("form").serialize()){
            $(this).closest("form").submit();
          }
        });
    })(jQuery);
  </script>
</block>
